<template>
  <div class="table-container">
    <div class="table">
      <div class="table-row">
        <div class="table-cell">
          <div ref="chartRef2" style="width: 100%; height: 100%; "></div>
        </div> <!-- 添加了一些示例内容 -->
        <div class="table-cell">单元格2</div>
      </div>
      <div class="table-row">
        <div class="table-cell">单元格3</div>
        <div class="table-cell">单元格4</div>
      </div>
      <div class="table-row">

        <div class="table-cell" style="margin-right: 0px;">单元格5</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref ,reactive} from 'vue'
import { useChart } from "@/hook/useChart"
import {chartDataApi2} from "@/api/dashboard"
const chartRef2 = ref(null)//获取图表的ref
// 饼图
const setChartData2 = async () => {
    const chartOptions = reactive({
        legend: {
            top: 'bottom'
        },
        tooltip: {
            trigger: "item",
            formatter: '{a}<br/>{b}:{c}'
        },
        series: [
            {
                name: '营收占比',
                type: 'pie',
                radius: ["50%", "70%"],
                center: ['50%', '50%'],
                roseType: "area",
                emphasis: {
                    label: {
                        show: true,
                        fontSize: "16",
                        fontWeight: "bold"
                    }
                },
                data: []
            }
        ],
        graphic: {
            type: 'text',
            left: "center",
            top: "center",
            style: {
                text: "营收占比",
                fontSize: 20,
                fill: "#333"
            }
        }
    })
    const res = await chartDataApi2()
    chartOptions.series[0].data = res.data.list;
    return chartOptions
}
useChart(chartRef2, setChartData2)
</script>

<style lang="scss" scoped>
/* 基本样式 */
body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

/* 容器 */
.table-container {
  min-width: 700px;
  margin: 0 auto;
  padding: 10px;
  background-color: #f9f9f9; /* 可选：为容器添加背景色以区分 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 可选：为容器添加阴影 */
  min-width: 950px;

}

/* 表格 */
.table {
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
}
.table-cell:first-child{
  margin-right: 10px
}
/* 表格行 */
.table-row {
  display: flex;
  width: 100%;
  min-height: 300px;
  margin-bottom: 10px;
}

/* 表格单元格 */
.table-cell {
  flex: 1;
  background-color: #fff;
  border: 1px solid #000;
  box-sizing: border-box;
  padding: 20px; /* 可调整单元格内边距 */
  display: flex;
  align-items: center; 
  justify-content: center;
}

</style>